<template>
  <div class="contain">
    <el-amap-search-box
      :search-option="searchOption"
      :on-search-result="onSearchResult"
    />
    <div class="btnDraw" v-if="!startDraw" @click="handleDraw">开始绘制</div>
    <div class="btnDraw" v-else @click="handelFinishDraw">停止绘制</div>
    <div class="btnDraw cancel" @click="handleClearDraw">重置</div>
    <el-amap
      class="amap-box"
      :zoom="amap.zoom"
      :center="amap.center"
      :plugin="amap.plugin"
      :events="amap.events"
    >
    </el-amap>
  </div>
</template>
<script>

export default {
  name: "Map",
  props: {
    lnglat: {
      type: Array,
      default: () => ([])
    },
  },
  data() {
    const self = this;
    return {
      searchOption: {
        city: "全国",
        // citylimit: true,
      },
      amap: {
        zoom: 13,
        center: [120.09, 30.89],
        events: {
          init: self.initAMap
        },
        plugin: [
          {
            pName: 'MapType',
            defaultType: 1, // 0代表默认，1代表卫星
            showLabel: true,
            showRoad: true, // 路网
            showTraffic: false, // 路况
          }
        ],
      },
      startDraw: false,
      potList: [],
    };
  },
  watch: {
    lnglat: {
      handler(e) {
        if (e) {
          this.amap.center = [e.lng, e.lat]
        }
      },
      deep: true
    },
  },
  created () {
    if (this.lnglat && this.lnglat.length == 2) {
      this.amap.center = [...this.lnglat]
    } else {
      this.amap.center = [120.09, 30.89]
      // 定位
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(position => {
          let lat = position.coords.latitude;
          let lng = position.coords.longitude;
          if (lat && lng) {
            this.amap.center = [lng, lat]
          }
        })
      }
    }
  },
  mounted () {
  },
  methods: {
    onSearchResult (pois) {
      this.amap.center = [pois[0].lng, pois[0].lat]
    },
    initAMap (map) {
      this.map = map

      this.map.on("click", (e) => {
        if (this.startDraw) {
          let lnglat = [e.lnglat.lng, e.lnglat.lat]
          console.log(123, lnglat)
          this.potList.push(lnglat)
        }
      });
    },
    handleDraw () {
      // this.handleClearDraw()
      this.startDraw = true
      let mouseTool = new AMap.MouseTool(this.map);
      this.tool = mouseTool;
      mouseTool.polygon({
        strokeColor: "#00fff6",
        strokeOpacity: 0.5,
        strokeWeight: 6,
        fillColor: '#00fff6',
        fillOpacity: 0.5,
        strokeStyle: "solid",
      });
      // mouseTool.on("draw", (event) => {
      //   console.log(event.obj);
      // });
    },
    handelFinishDraw() {
      this.startDraw = false
      // 移除绘制的多边形
      // this.tool.close();
      this.tool.close(true);
      // 添加多边形
      const polygon = new AMap.Polygon({
        path: this.potList,
        strokeColor: '#00fff6',
        strokeOpacity: 0.5,
        strokeWeight: 6,
        fillColor: '#00fff6',
        fillOpacity: 0.5,
        strokeStyle: "solid",
      })
      if (this.potList.length > 1) {
        this.map.add(polygon)
        this.$emit('updatePath', this.potList)
      }
      this.potList = []
    },
    //重置
    handleClearDraw () {
      this.startDraw = false
      this.potList = []
      this.map.clearMap()
    },
  },
};
</script>
<style lang="scss" scoped>
.contain {
  width: 100%;
  height: 100%;
  position: relative;
  .btnDraw {
    position: absolute;
    top: 0;
    z-index: 5;
    height: 32px;
    line-height: 32px;
    padding: 0 10px;
    background: #409eff;
    color: #fff;
    cursor: pointer;
    border-radius: 4px;

    &.cancel {
      left: 82px;
    }
  }
  .amap-box {
    width: 100%;
    height: 100%;
  }
}
::v-deep {
  .el-vue-search-box-container {
    width: 200px;
    height: 32px;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    position: absolute;
    top: 0;
    right: 0;
  }
}
</style>